<template>
  <div class="container">
    <div class="tableList">
      <div class="add">
        <div class="name"><span class="required">检查项</span></div>
        <div>
          <el-button
            size="mini"
            icon="el-icon-plus"
            type="primary"
            v-if="!unEdit"
            @click="addCheckItem"
          >
            新增
          </el-button>
        </div>
      </div>
      <div class="table">
        <base-table :tableSetting="checkItemConfig"></base-table>
      </div>
    </div>
    <div class="tableList">
      <div class="add">
        <div class="name"><span>数据记录项</span></div>
        <div>
          <el-button
            size="mini"
            icon="el-icon-plus"
            type="primary"
            v-if="!unEdit"
            @click="addParamsItem"
          >
            新增
          </el-button>
        </div>
      </div>
      <div class="table">
        <base-table :tableSetting="paramsItemConfig"></base-table>
      </div>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="show"
      :modal="false"
      width="30%"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <div style="padding: 20px 20px 50px 20px">
        <editForm
          v-if="title == '新增检查项' || title == '编辑检查项'"
          :formConfig="checkFormConfig"
          ref="editForm"
          :formData="checkFormData"
        ></editForm>
        <editForm
          v-else
          :formConfig="paramsFormConfig"
          ref="editForm"
          :formData="paramsFormData"
        ></editForm>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
export default {
  props: {
    checkItemList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    paramsItemList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    unEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "",
      show: false,
      //基本参数
      checkItemConfig: {
        indexShow: true,
        highlightRow: false,
        column: [
          {
            label: "设备运行状态",
            textAlign: "center",
            prop: "runState",
            formatter: (row) => {
              return row.runState == 1 ? "运行中" : "未运行";
            },
          },
          {
            label: "检查项名称",
            textAlign: "center",
            prop: "itemName",
          },
          {
            label: "检查标准",
            textAlign: "center",
            prop: "itemValue",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            hide: false,
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.rowIndex = index;
                  this.editCheckItem(row);
                },
              },
              {
                text: "删除",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.checkItemConfig.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
        spanMethod: ({ row, column, rowIndex, columnIndex }) => {
          if (columnIndex == 1) {
            return {
              rowspan: this.rowSpanArr[rowIndex],
              colspan: 1,
            };
          }
        },
        //height: 400,
      },
      paramsItemConfig: {
        indexShow: true,
        highlightRow: false,
        column: [
          {
            label: "设备运行状态",
            textAlign: "center",
            prop: "runState	",
            formatter: (row) => {
              return row.runState == 1 ? "运行中" : "未运行";
            },
          },
          {
            label: "记录项名称",
            textAlign: "center",
            prop: "itemName",
          },
          {
            label: "记录项单位",
            textAlign: "center",
            prop: "itemUnit",
          },
          {
            label: "默认值",
            textAlign: "center",
            prop: "defaultValue",
          },
          {
            label: "数据标准",
            textAlign: "center",
            prop: "dataStandard",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            hide: false,
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.rowIndex = index;
                  this.editParamItem(row);
                },
              },
              {
                text: "删除",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.paramsItemConfig.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
        spanMethod: ({ row, column, rowIndex, columnIndex }) => {
          if (columnIndex == 1) {
            return {
              rowspan: this.paramsRowSpanArr[rowIndex],
              colspan: 1,
            };
          }
        },
        //height: 400,
      },
      //弹出框检查项表单配置信息
      checkFormConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "设备运行状态",
            prop: "runState",
            type: "radio",
            span: 24,
            radioOption: [
              { label: "运行中", value: 1 },
              { label: "未运行", value: 0 },
            ],
            required: true,
          },
          {
            label: "检查项名称",
            prop: "itemName",
            type: "text",
            span: 24,
            required: true,
          },
          {
            label: "检查标准",
            prop: "itemValue",
            type: "textarea",
            span: 24,
            rows: 4,
            required: true,
          },
        ],
      },
      //弹出框表单数据
      checkFormData: {},
      //弹出框数据项表单配置信息
      paramsFormConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "设备运行状态",
            prop: "runState",
            type: "radio",
            span: 24,
            radioOption: [
              { label: "运行中", value: 1 },
              { label: "未运行", value: 0 },
            ],
            required: true,
          },
          {
            label: "记录项名称",
            prop: "itemName",
            type: "text",
            span: 24,
            required: true,
          },
          {
            label: "记录项单位",
            prop: "itemUnit",
            type: "text",
            span: 24,
            required: true,
          },
          {
            label: "默认值",
            prop: "defaultValue",
            type: "text",
            span: 24,
            required: false,
          },
          {
            label: "数据标准",
            prop: "dataStandard",
            type: "textarea",
            rows:5,
            span: 24,
            required: false,
          },
        ],
      },
      //弹出框表单数据
      paramsFormData: {},
      rowIndex: 0,
      rowSpanArr: [],
      position: 0,
      paramsRowSpanArr: [],
      spanIndex: 0,
    };
  },
  computed: {
    checkRunningLength() {
      return this.checkItemConfig.data.filter((item) => {
        return item.runState === 1;
      }).length;
    },
    paramsRunningLength() {
      return this.paramsItemConfig.data.filter((item) => {
        return item.runState === 1;
      }).length;
    },
  },
  watch: {
    checkItemList: {
      handler(val) {
        this.checkItemConfig.data = this.sortTableData(val);
      },
      deep: true,
    },
    paramsItemList: {
      handler(val) {
        this.paramsItemConfig.data = this.sortTableData(val);
      },
      deep: true,
    },
    unEdit: {
      handler(val) {
        this.checkItemConfig.column[3].hide = val;
        this.paramsItemConfig.column[3].hide = val;
      },
    },
    "checkItemConfig.data": {
      handler(val) {
        this.getCheckRowSpan();
      },
    },
    "paramsItemConfig.data": {
      handler(val) {
        this.getParamsRowSpan();
      },
    },
  },
  created() {
    this.checkItemConfig.data = this.sortTableData(this.checkItemList);
    this.paramsItemConfig.data = this.sortTableData(this.paramsItemList);
    this.getCheckRowSpan();
    this.getParamsRowSpan();
  },
  methods: {
    //新增检查项
    addCheckItem() {
      this.title = "新增检查项";
      this.show = true;
    },
    //新增数据记录项
    addParamsItem() {
      this.title = "新增数据记录项";
      this.show = true;
    },
    //编辑检查项
    editCheckItem(row) {
      this.title = "编辑检查项";
      this.checkFormData = Object.assign({}, row);
      this.show = true;
    },
    //编辑数据记录项
    editParamItem(row) {
      this.title = "编辑数据记录项";
      this.paramsFormData = Object.assign({}, row);
      this.show = true;
    },
    //排序表格数据
    sortTableData(data) {
      let table = [],
        count = 0;
      data.forEach((item) => {
        if (item.runState == 1) {
          table.splice(count, 0, item);
          count++;
        } else {
          table.push(item);
        }
      });
      return table;
    },
    //检查项的合并规则
    getCheckRowSpan() {
      this.rowSpanArr = [];
      this.checkItemConfig.data.forEach((item, index) => {
        if (index == 0) {
          this.rowSpanArr.push(1);
          this.position = 0;
        } else {
          if (item.runState == this.checkItemConfig.data[index - 1].runState) {
            this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中
            this.rowSpanArr.push(0);
          } else {
            this.rowSpanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    //数据记录项的合并规则
    getParamsRowSpan() {
      this.paramsRowSpanArr = [];
      this.paramsItemConfig.data.forEach((item, index) => {
        if (index == 0) {
          this.paramsRowSpanArr.push(1);
          this.spanIndex = 0;
        } else {
          if (item.runState == this.paramsItemConfig.data[index - 1].runState) {
            this.paramsRowSpanArr[this.spanIndex] += 1; //项目名称相同，合并到同一个数组中
            this.paramsRowSpanArr.push(0);
          } else {
            this.paramsRowSpanArr.push(1);
            this.spanIndex = index;
          }
        }
      });
    },
    //提交表单
    async doSubmit() {
      try {
        let row = await this.$refs.editForm.getFormData();
        if (this.title == "新增检查项") {
          if (row.runState == 1) {
            this.checkItemConfig.data.splice(this.checkRunningLength, 0, row);
          } else {
            this.checkItemConfig.data.push(row);
          }
        } else if (this.title == "编辑检查项") {
          if (row.runState == 1 && this.rowIndex >= this.checkRunningLength) {
            this.checkItemConfig.data.splice(this.rowIndex, 1);
            this.checkItemConfig.data.splice(this.checkRunningLength, 1, row);
          } else if (
            row.runState != 1 &&
            this.rowIndex < this.checkRunningLength
          ) {
            this.checkItemConfig.data.splice(this.rowIndex, 1);
            this.checkItemConfig.data.push(row);
          } else {
            this.checkItemConfig.data.splice(this.rowIndex, 1, row);
          }
        } else if (this.title == "新增数据记录项") {
          if (row.runState == 1) {
            this.paramsItemConfig.data.splice(this.paramsRunningLength, 0, row);
          } else {
            this.paramsItemConfig.data.push(row);
          }
        } else {
          if (row.runState == 1 && this.rowIndex >= this.paramsRunningLength) {
            this.paramsItemConfig.data.splice(this.rowIndex, 1);
            this.paramsItemConfig.data.splice(this.paramsRunningLength, 1, row);
          } else if (
            row.runState != 1 &&
            this.rowIndex < this.paramsRunningLength
          ) {
            this.paramsItemConfig.data.splice(this.rowIndex, 1);
            this.paramsItemConfig.data.push(row);
          } else {
            this.paramsItemConfig.data.splice(this.rowIndex, 1, row);
          }
        }
        this.show = false;
      } catch (error) {
        this.$message.warning(error);
      }
    },
    //获取所有信息
    getCheckTableData() {
      let formData = {};
      formData.checkItem = this.checkItemConfig.data;
      formData.paramsItem = this.paramsItemConfig.data;
      return formData;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .tableList {
    height: 100%;
    margin-top: 20px;
    .add {
      margin: 10px 0;
      display: flex;
      .name {
        width: 120px;
        text-align: right;
        span {
          margin-right: 20px;
        }
      }
      .required::before {
        content: "*";
        color: red;
        margin-right: 4px;
      }
    }
    .table {
      margin-left: 120px;
    }
  }
}
</style>
